<!DOCTYPE html>
<html>
	<head>  
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>商城</title>
		<link rel="stylesheet" type="text/css" href="css/loaders.min.css" />
		<link rel="stylesheet" type="text/css" href="css/loading.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />	
		<link href="iconfont/iconfont.css" rel="stylesheet" />
	    <link rel="stylesheet" href="css/mui.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<script type="text/javascript" src="js/mui.js" ></script>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(window).load(function() {
				$(".loading").addClass("loader-chanage")
				$(".loading").fadeOut(300)
				})
			$(".btn").click(function(){
				$(".dialog").show(100)
			})
			
			
		</script>
	</head>
	<style type="text/css">
	
		/*这里是写的规格下面div的样式*/
		.dialog{
			width:100%;
			height:auto;
			background-color: rgba(0,0,0,0.1);
			box-shadow: black  0  0 1px;
			border-radius: 3px;
			padding:5px;
			right:10px;
			top:100px; 
			text-align:left;
			display:none;
		}
		/*div中button的样式*/
		.dialog button{
			height: 20px;
		}
		.detail222_span_01{
			float: right;
			font-size: 20px;
			margin-right: 1%;
		}
		
		/*评价中的信息*/
		.talkbox{
			display: none;
		}
		
		/*展示信西图片的地方css*/
		.talkbox1{
			text-align: center;
			display: none;		
		}
		.btn_2:hover{
			background: #2A2A2A; 
		}
		.btn_2:visited{
			background: #2A2A2A; 
		}
		.btn_2:active{
			background: #2A2A2A; 
		}
		.btn_2{
			width: 88%;
			background: #2A2A2A; 
			color: white;
			border-radius: 7px;
			line-height: 25px;
			margin-bottom: 30px;
		}
		.talkbox1 img{
			background-size: 100%;
			width: 99.5%;
		}
	</style>
	<!--loading页开始-->
	<div class="loading">
		<div class="loader">
			<div class="loader-inner pacman">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</div>
	<!--loading页结束-->
	<body>
		<header class="detail-header fixed-header" style="height: 25px;">

				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="font-size:30px ; color: #000000; margin-top: -3px;"></a>

			<span class="iconfont icon-fenxiang detail222_span_01"></span>
		</header>
		<!--以上是头部-->
		<!--这里开始是轮播图加一些信息-->
		<div class="contaniner fixed-contb">
			<section class="detail">
				<figure class="swiper-container">
					<ul class="swiper-wrapper">
						<li class="swiper-slide">
							<img src="images/detail-ban02.png" />
						</li>
						<li class="swiper-slide">
							<img src="images/detail-ban01.png" />
						</li>
						<li class="swiper-slide">
							<img src="images/detail-ban03.png" />
						</li>
						<li class="swiper-slide">
							<img src="images/detail-ban04.png" />
						</li>
					</ul>
					<div class="swiper-pagination">
					</div>
				</figure>
				<dl class="jiage">
					<dt>
					<h3 id="proname"></h3>
					<div class="collect">
						<span class="iconfont icon-shoucang-xianxing"></span>
						<p>收藏</p>
					</div>
				</dt>
					<dd>
						<b id="proprice"></b>
						<del id="prooldprice"></del>
						<input type="button" value="￥10.00" readonly />
						<small id="projifen"></small>
					</dd>
				</dl>
				<!--这里是规格 -->
				<div class="chose">
					<ul>
						<button id="proguige"  class="btn" onclick="click_btn()" style="width: 20%;">规格</button>
						<div class="dialog" id="dialog"></div>						
					</ul>
				</div>
				
				<article class="detail-article">
					<nav>
						<ul>
							<li class="article-active" onclick="click_li1()">评价</li>
						</ul>
					</nav>
					<!--这里是评论的块-->
					<ul id="talkbox" class="talkbox talk">
					<!--这里循环展示-->	
						<!--<li>
							<figure><img src="images/detail-tou.png" /></figure>
							<dl>
								<dt>
								<p>瑾晨</p>
								<time>2015.11.17</time>
								<div class="star">
									<span><img src="images/detail-iocn01.png"/></span>
									<span><img src="images/detail-iocn01.png"/></span>
									<span><img src="images/detail-iocn01.png"/></span>
									<span><img src="images/detail-iocn01.png"/></span>
									<span><img src="images/detail-iocn01.png"/></span>
								</div>
							</dt>
								<dd>哎哟不错哦，很性感哦！</dd>
								<small>颜色：豹纹凯特</small>
							</dl>
						</li>-->
						
					</ul>
 
				</article>
					</section>
			<!--这里结束-->		
			<center>
			<button  class="btn_2" onclick="click_li2()">商品详情</button>
			</center>
			<section class="talkbox1" id="talkbox1" >
				<!--这里循环展示-->
				<!--<img src="images/1.jpg"/>-->
			</section>
			
		</div>
		<footer class="detail-footer fixed-footer">
			<a style="float: left; text-align: center; color: red; margin-left: 4%; margin-top: 3%;">
				<span class="iconfont icon-kefu"></span>
				<p style="color: #000;">客服</p>
			</a>				
			<a href="car/shopcar.html" class="go-car">
				<input type="button" value="加入购物车" />
			</a>
			<a href="buy.html" class="buy" style="background-color: red;">
				立即购买
			</a> 
		</footer>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			$(function(){
				var proid = localStorage["proid"];
				$.post(localStorage["urlip"]++"shop/showProId.do",
				{
					proid:proid
				},
				function(data){
					var dataObj1=eval("("+data+")");
					var proname = document.getElementById("proname");
					proname.innerText=dataObj1[0].proname;
					var proprice = document.getElementById("proprice");
					proprice.innerHTML="￥"+dataObj1[0].proprice;
					var prooldprice=document.getElementById("prooldprice");
					prooldprice.innerText="￥"+dataObj1[0].prooldprice;
					var projifen = document.getElementById("projifen");
					projifen.innerText="+356积分"; 
				});
  
			});    
//			商品评论
			function click_li1(){
				var proid = localStorage["proid"];
 				var talkbox=document.getElementById("talkbox");
				if(talkbox.style.display=="none"){
					talkbox.style.display="block";
					/*在这里写查询的东西*/
					$.post(localStorage["urlip"]+"shop/showProCommentPage.do",
					{
						proid:proid,
						pagenow:"1",
						pagesize:"4"
					},   
					function(data){
						var dataObj1=eval("("+data+")");
						var talkbox = document.getElementById("talkbox");
						talkbox.innerHTML="";
						for(var i=0;i<dataObj1.length;i++){ 
							var a="";
							for( var b=0;b<dataObj1[i].pcgrade;b++){
								a+="<span><img src='images/detail-iocn01.png'/></span>"
							}
							
							talkbox.innerHTML+="<li><figure><img src='images/detail-tou.png' /></figure><dl><dt>"				
							+"<p>"+dataObj1[i].pcid+"</p>"  
							+"<time>"+dataObj1[i].pcdate+"</time><div class='star'>"
							+a+"</div></dt>"
							+"<dd>"+ dataObj1[i].pccomment+"</dd>";
						}
					});
				}else 
					talkbox.style.display="none";
			}
			
			//商品详情
			function click_li2(){ 
				var proid = localStorage["proid"];
				var id = localStorage["proid"];
				var talkbox1=document.getElementById("talkbox1");
				if(talkbox1.style.display=="none"){
					talkbox1.style.display='block'
					$.post("http://192.168.43.200:8080/shop/showProId.do",
					{
						proid:id,
					}, 
					function(data){
						var dataObj1=eval("("+data+")");
						//在这里写查询的东西
						var talkbox1 = document.getElementById("talkbox1");
						talkbox1.innerHTML="<span><img src='"+dataObj1[0].proimg+"'/></span>"
						+"<span><img src='"+dataObj1[0].proimgs+"'/></span>";
					});
				}else 
					talkbox1.style.display='none';
			}			
			function click_btn(){
				
				var id = localStorage["proid"];
				$.post("http://192.168.43.200:8080/shop/showpronorms.do",
					{proid:id},
					function(data){
						var m; 
						var dataObj1=eval("("+data+")");
						var x = document.getElementById("dialog");
						x.innerHTML="";
						for(var a=0;a<dataObj1.length;a++){
							x.innerHTML+='<button onclick="aa(this)" value="small">'+dataObj1[a].normsdetail+'</button>';	
						}
						if(x.style.display=="none"){
							x.style.display="block"; 
						}else { 
							x.style.display="none";
						}
						
					});
				
			}
			function aa(data){
				var proguige = document.getElementById("proguige");
				proguige.innerHTML=data.innerText;	
			}
			
			
			
			$(window).scroll(function() {
				if($(".detail-header").offset().top > 50) {
					$(".detail-header").addClass("change");
				} else {
					$(".detail-header").removeClass("change");
				}
			});
		</script>
		<script src="js/swiper.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				var mySwiper = new Swiper('.swiper-container', {
					loop: true,
					speed: 1000,
					autoplay: 2000,
					pagination: '.swiper-pagination',
				});
			})
		</script>
		
		
	</body>
</html>